<template>
  <div class="c-bg-sgray">
    <div v-if="listType == 1" class="c-pb24">
      <div class="c-pv24 c-ph24 c-mb10 c-bg-white c-w100 c-contexty-hidden c-contextX-scroll c-ws-n">
        <span v-for="(item, index) in tabs" :key="index" @click="changeType(index+1)" class="c-pv16 c-ph20 c-br30 c-fs22 c-mr20 c-vcAlign-middle c-inlineblack"
          :class="typeIndex != (index + 1) ? 'c-fc-sblack c-bg-f2':'theme-fc theme-bd1 theme-bg-10'" v-if="countMap[tabMap[item]] > 0">
          {{item + '(' + countMap[tabMap[item]] + ')'}}
        </span>
      </div>
      <shop-comment-com :subComment="shopComments" :showType="3" @showMore="showMore" @showExtraMore="showExtraMore"></shop-comment-com>
    </div>
    <div v-else>
      <div class="c-flex-row c-aligni-center c-pv20 c-ph24 theme-fc c-fs22 theme-bg-10"><i class="icon-laba iconfont c-fs24 c-mr12"></i>仅显示180天内的已评价内容</div>
      <shop-comment-com :subComment="shopComments" :showType="4" @goCommentDetail="goCommentDetail" @addExtraComment="addExtraComment"></shop-comment-com>
    </div>
    <loading-status-tem :dataStatus="dataStatus" :noDataText="'暂无评价'"></loading-status-tem>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import ShopCommentCom from "@/components/templates/shopCommentCom.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
let shopNo = '';
let limit = 10;
export default {
  name: 'ShopCommentList',
  data() {
    return {
      shopComments: null,
      tabs: ['全部', '有图', '好评', '中/差评', '追加'],
      typeIndex: 1,
      dataStatus: 'HAS_MORE_DATA',
      page: 1,
      tabMap: {
        '全部': 'totalComCount', //全部
        '有图': 'picComCount', //有图
        '好评': 'goComCount', // 好评
        '中/差评': 'baComCount', //中/差评
        '追加': 'extraComCount', // 追加
      },
      countMap: {
        'totalComCount': 0, //全部
        'picComCount': 0, //有图
        'goComCount': 0, // 好评
        'baComCount': 0, //中/差评
        'extraComCount': 0, // 追加
      },
      listType: 1, //1商城评价列表 2已评价列表
    }
  },
  components: {
    ShopCommentCom,
    loadingStatusTem
  },
  methods: {
    // 添加追加评价
    addExtraComment(item) {
      this.$routerGo(this, "push", {
        path: "/mall/shopComments/addShopComment",
        query: ({
          goId: item.goId, // 订单id
          gsiiId: item.gsiiId, // 规格id
          mgId: item.mgId, // 商品id
          id: item.id, // 原评价id
          type: 1, // 添加评价
          isExtra: 1, // 追加评价
        })
      });
    },
    // 跳转到个人评价详情
    goCommentDetail(id) {
      this.$routerGo(this, "push", {
        path: '/mall/shopComments/shopCommentDetail',
        query: ({ id: id, type: 2 })
      })
    },
    // 切换类型
    changeType(type) {
      this.typeIndex = type;
      this.page = 1;
      this.getShopComments();
    },
    // 追评查看更多
    showExtraMore(index) {
      this.$set(this.shopComments[index], 'showExtraMore', false);
    },
    // 评论查看更多
    showMore(index) {
      this.$set(this.shopComments[index], 'showMore', false);
    },
    // 获取商城全部评价
    getShopComments() {
      let that = this;
      if (that.dataStatus == 'LOADING') {
        return;
      }
      that.dataStatus = 'LOADING';
      utilJs.getMethod(global.apiurl + "goods/getComment/" + shopNo + '?limit=' + limit + '&type=' + that.typeIndex + '&page=' + that.page, res => {
        if (that.page == 1) {
          that.shopComments = res.comment.data ? res.comment.data : [];
          that.shopComments.forEach((item, index) => {
            let createTime = item.createdAt.split(" ");
            that.$set(that.shopComments[index], 'createdAt', createTime[0]);
            that.$nextTick(() => {
              that.showStars(index, that.shopComments[index].starRank);
            })
          })
          that.countMap.baComCount = res.baComCount ? res.baComCount : 0;
          that.countMap.goComCount = res.goComCount ? res.goComCount : 0;
          that.countMap.picComCount = res.picComCount ? res.picComCount : 0;
          that.countMap.totalComCount = res.totalComCount ? res.totalComCount : 0;
          that.countMap.extraComCount = res.extraComCount ? res.extraComCount : 0;
        } else {
          that.shopComments = [...that.shopComments, ...res.comment.data];
          res.comment.data.forEach((item, index) => {
            let i = index + ((that.page - 1) * limit)
            let createTime = item.createdAt.split(" ");
            that.$set(that.shopComments[i], 'createdAt', createTime[0]);
            that.$nextTick(() => {
              that.showStars(i, that.shopComments[index].starRank);
            })
          })
        }
        if (!res.comment.total || (res.comment.total == that.shopComments.length)) {
          that.dataStatus = !res.comment.total || res.comment.total == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          that.dataStatus = 'HAS_MORE_DATA';
          that.page++;
        }
        that.shopComments.forEach((item, index) => {
          that.$set(that.shopComments[index], 'showMore', false);
          that.$nextTick(() => {
            if (document.getElementById('txtBox' + index) && document.getElementById('txtBox' + index).clientHeight > 95) {
              that.$set(that.shopComments[index], 'showMore', true);
            }
            if (document.getElementById('extraTxtBox' + index) && document.getElementById('extraTxtBox' + index).clientHeight > 95) {
              that.$set(that.shopComments[index], 'showExtraMore', true);
            }
          })
        })
      }, failRes => {
        that.dataStatus = 'DATA_ERROR';
      });
    },
    // 获取已评价列表
    getHasComments() {
      let that = this;
      if (that.dataStatus == 'LOADING') {
        return;
      }
      that.dataStatus = 'LOADING';
      utilJs.getMethod(global.apiurl + 'goods/getHasComments/?limit=' + limit + '&page=' + that.page, res => {
        if (that.page == 1) {
          that.shopComments = res.data ? res.data : [];
          that.shopComments.forEach((item, index) => {
            let createTime = item.createdAt.split(" ");
            that.$set(that.shopComments[index], 'createdAt', createTime[0]);
            that.$nextTick(() => {
              that.showStars(index, that.shopComments[index].starRank);
            })
          })
        } else {
          that.shopComments = [...that.shopComments, ...res.data];
          res.data.forEach((item, index) => {
            let i = index + ((that.page - 1) * limit)
            let createTime = item.createdAt.split(" ");
            that.$set(that.shopComments[i], 'createdAt', createTime[0]);
            that.$nextTick(() => {
              that.showStars(i, that.shopComments[index].starRank);
            })
          })
        }
        if (!res.total || (res.total == that.shopComments.length)) {
          that.dataStatus = !res.total || res.total == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          that.dataStatus = 'HAS_MORE_DATA';
          that.page++;
        }
      }, failRes => {
        that.dataStatus = 'DATA_ERROR';
      });
    },
    // 星级评价
    showStars(index, num) {
      let stars = document.getElementById('starsBox' + (index));
      if (!stars) {
        return
      }
      for (let i = 0; i < 5; i++) {
        stars.getElementsByTagName('span')[i].classList.remove('theme-fc');
      }
      for (let i = 0; i < num; i++) {
        stars.getElementsByTagName('span')[i].classList.add('theme-fc');
      }
    },
    //下滑获取更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(() => {
        if (that.dataStatus == 'HAS_MORE_DATA' && that.shopComments && that.shopComments.length > 0) {
          if (that.listType == 1) {
            that.getShopComments();
          } else {
            that.getHasComments();
          }
        }
      });
    },
    //分享
    wechatShare: function () {
      var shareUrl = ''
      if (this.listType == 1) {
        shareUrl = window.location.href.split("#")[0] + this.$route.path + '?shopNo=' + this.$route.query.shopNo + '&type=' + this.listType + '&refereeId=' + localStorage.getItem("userId");
      } else {
        shareUrl = window.location.href.split("#")[0] + "#/?refereeId=" + localStorage.getItem("userId");
      }
      utilJs.wechatConfig(shareUrl, "", "", "", function () { }, true);
    },
    //手机端分享
    appShare: function () {
      var shareUrl = ''
      if (this.listType == 1) {
        shareUrl = window.location.href.split("#")[0] + this.$route.path + '?shopNo=' + this.$route.query.shopNo + '&type=' + this.listType + '&refereeId=' + localStorage.getItem("userId");
      } else {
        shareUrl = window.location.href.split("#")[0] + "#/?refereeId=" + localStorage.getItem("userId");
      }
      utilJs.appShareTrue("", "", shareUrl, "");
    }
  },
  activated() {
    this.listType = this.$route.query.type ? this.$route.query.type : '';
    shopNo = this.$route.query.shopNo;
    this.wechatShare();
    this.dataStatus = 'HAS_MORE_DATA';
    this.typeIndex = 1;
    this.page = 1;
    this.shopComments = null;
    if (this.listType == 1) {
      setDocumentTitle("全部评价");
      this.getShopComments();
    } else {
      setDocumentTitle("已评价");
      this.getHasComments();
    }
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>